<template>
	<view class="main">
		<!-- 背景 -->
		<image class="background" :src="playInfo.coverImgUrl ? playInfo.coverImgUrl : ''" mode="widthFix" />
		<view class="bg"></view>

		<!-- 头部 -->
		<view class="title_wrap">
			<!-- 图片 -->
			<view class="photo"><image mode="widthFix" :src="playInfo.coverImgUrl ? playInfo.coverImgUrl : ''" /></view>
			<!-- 内容 -->
			<view class="content">
				<view class="content_title">{{ playInfo.name }}</view>
				<!-- 头像及个人信息 -->
				<view class="content_info">
					<view class="content_headPortrait"><image  :src="playInfo.avatarUrl"></image></view>
					<view class="content_nickname">{{ playInfo.nickname }}</view>
					<view class="iconfont icon-jiankuohaoxiyou" style="color: #f5f5f5; line-height: 73upx; font-size: 35upx;"></view>
				</view>
				<view class="content_description">{{ playInfo.description == null ? '' : playInfo.description }}</view>
			</view>
		</view>
		<!-- 图标菜单 -->
		<view class="iconMenu_wrap">
			<view class="menu_item">
				<view class="iconfont icon-pinglun" style="font-size: 60upx; color: white; margin-left: 10upx;"></view>
				<view class="menu_title">{{ playInfo.commentCount }}</view>
			</view>
			<view class="menu_item">
				<view class="iconfont icon-fenxiang" style="font-size: 60upx; color: white;"></view>
				<view class="menu_title">{{ playInfo.shareCount }}</view>
			</view>
			<view class="menu_item">
				<view class="iconfont icon-xiazai" style="font-size: 60upx; color: white;"></view>
				<view class="menu_title">下载</view>
			</view>
			<view class="menu_item">
				<view class="iconfont icon-duoxuan" style="font-size: 60upx; color: white;"></view>
				<view class="menu_title">多选</view>
			</view>
		</view>
		<!-- 歌曲列表 -->
		<view class="songList_wrap">
			<view class="songList_wrap_title">
				<view id="play" @click="playAll" class="iconfont icon-bofang" style="font-size: 50upx; color: #333333;"></view>
				<view class="paly2" data-index="0">
					播放全部
					<text class="songCount">(共{{ playInfo.trackCount }}首)</text>
				</view>
				<view class="play3_border">
					<view class="paly3">+ 收藏({{ playInfo.subscribedCount }})</view>
				</view>
			</view>
			<view class="songArray_wrap" v-for="(item, index) in playInfo.tracks" :key="index">
				<view class="songArray_inex">{{ index + 1 }}</view>
				<view class="songArray_content" @click="playMusic(item.id)">
					<view class="content_1">
						{{ item.name }}
						<!-- undefined处理 -->
						<text class="content_2">{{ item.alia[0] == null ? '' : '(' + item.alia[0] + ')' }}</text>
					</view>
					<view class="content_3">
						<!-- SQ音质图标处理 -->
						<text v-if="privileges[index].maxbr === 999000" class="iconfont icon-sq" style="color: red;" />
						{{ item.ar[0].name }}-{{ item.al.name }}
					</view>
				</view>
				<!-- MV图标处理 -->
				<view class="songArray_mv">
					<view v-if="item.mv !== 0"><view id="songArray_mv" class="iconfont icon-Youtube" @click="playMv(item.mv)"></view></view>
					<view v-else><view id="songArray_mv" class="iconfont icon-Youtube" style="color: white;"></view></view>
				</view>
				<view id="songArray_other" class="iconfont icon-caidan2" style="color: #cccccc;"></view>
			</view>
		</view>
		<mytarbar class="mytarbar" ></mytarbar>
	</view>
</template>

<script>
import { PlayListRequest } from '../../api/playlist.js';
import MyTarBar from '../../components/mytarbar/mytarbar.vue';
export default {
	data() {
		return {
			// 歌单详情数据
			playInfo: [],
			// 歌单中SQ音质数据
			privileges: [],
			allMusic:[]
		};
	},
	onLoad(option) {
		this.getPlaylistDetail(option.id);
	},
	comments: {
		MyTarBar
	},
	methods: {
		async getPlaylistDetail(id) {
			let result = await PlayListRequest({
				url: '/playlist/detail',
				data: {
					id
				}
			});
			this.playInfo = result[1].data.playlist;
			this.privileges = result[1].data.privileges;
			this.playInfo.avatarUrl=this.playInfo.creator.avatarUrl
			this.playInfo.nickname=this.playInfo.creator.nickname
			this.allMusic=this.playInfo.tracks.map(item=>{
				return {
					name:item.name,
					id:item.id,
					author:item.ar[0].name
				}
			})
		},
		playMusic(id) {
			this.$store.dispatch('getSong', id);
		},
		playAll(){
			this.$store.commit("addList",this.allMusic)
		}
		
	}
};
</script>

<style lang="scss" scoped>
.main {
	position: relative;
	width: 100vw;
	height: 100vh;
	overflow-x: hidden;
	overflow-y: auto;
}
.background {
	width: 100%;
	z-index: 0;
	position: absolute;
	filter: blur(20upx);
}
.bg {
	width: 100%;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	position: absolute;
	background-color: rgba(0, 0, 0, 0.6);
	z-index: 1;
}
.main::-webkit-scrollbar {
	width: 0;
	height: 0;
	color: transparent;
}
/* 背景处理 */

.play-list-bg {
	background-repeat: no-repeat;
	background-size: cover;
	background-position: 50%;
	-webkit-filter: blur(20px);
	filter: blur(20px);
	-webkit-transform: scale(1.5);
	transform: scale(1.5);
}

.play-list-bg,
.play-list-bg::after {
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: 1;
	width: 100%;
	height: 420upx;
}

.play-list-bg::after {
	content: '';
	background-color: rgba(0, 0, 0, 0.25);
}

/* 内容 */

.main {
	position: absolute;
	z-index: 2;
	width: 100%;
}

.title_wrap {
	padding-top: 50upx;
	display: flex;
	width: 98%;
	position: absolute;
	justify-content: space-around;
	z-index: 10;
	/* border: 1upx solid black; */
}

.photo {
	/* width: 30%; */
	margin-left: 30upx;
}

.photo image {
	width: 260upx;
	height: 260upx;
	border-radius: 10upx;
}

.content {
	/* width: 50%; */
	margin-left: 50upx;
}

.content_title {
	/* width: 60%; */
	font-size: 34upx;
	font-weight: 600;
	letter-spacing: 4upx;
	color: white;
	z-index: 10;
}

.content_info {
	display: flex;
	width: 100%;
	justify-content: flex-start;
	padding: 12upx 0;
}

.content_headPortrait image {
	width: 70upx;
	height: 70upx;
	border-radius: 50%;
}

.content_nickname {
	margin-left: 20upx;
	font-size: 30upx;
	color: #f5f5f5;
	font-weight: 100;
	line-height: 70upx;
}

.content_description {
	font-size: 25upx;
	line-height: 40upx;
	color: #ccc;
	text-overflow: -o-ellipsis-lastline;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
}

.iconMenu_wrap {
	position: absolute;
	top: 25vh;
	padding: 40upx 0;
	display: flex;
	z-index: 10;
	justify-content: space-around;
	left: 0;
	right: 0;
}
.menu_item {
	text-align: center;
	flex: 1;
}
.menu_item .menu_title {
	color: #ccc;
	text-align: center;
	font-size: 30upx;
	/* padding-right: 0upx; */
}

/* 列表 */

.songList_wrap {
	position: absolute;
	overflow: hidden;
	background-color: white;
	border-radius: 20upx;
	z-index: 10;
	top: 40vh;
	left: 0;
	right: 0;
	padding-bottom: 140upx;
	/* height: 100%; */
}

.songList_wrap_title {
	padding: 40upx 0;
	display: flex;
	justify-content: space-between;
}

.songList_wrap_title {
	font-size: 38upx;
	color: #333;
}

#play {
	padding-left: 40upx;
}

.paly2 {
	margin-right: 50upx;
}

.songCount {
	font-size: 30upx;
	color: #ccc;
}

.play3_border {
	margin-right: 20upx;
	width: 220upx;
	height: 80upx;
	background-color: red;
	border-radius: 40upx;
	margin-top: -12upx;
	text-align: center;
}

.paly3 {
	color: white;
	font-size: 30upx;
	line-height: 80upx;
}

/* 歌曲内容 */

.songArray_wrap {
	width: 100%;
	display: flex;
	justify-content: space-between;
	padding: 20upx 0;
}

.songArray_inex {
	padding-left: 40upx;
	color: #ccc;
	line-height: 70upx;
	width: 10%;
}

.songArray_content {
	width: 65%;
}

.content_1 {
	font-size: 35upx;
	/* 超过省略号 */
	text-overflow: -o-ellipsis-lastline;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 1;
	line-clamp: 1;
	-webkit-box-orient: vertical;
}

.songArray_content .content_2 {
	font-size: 35upx;
	color: #ccc;
}

.songArray_content .content_3 {
	font-size: 25upx;
	color: #ccc;
	margin-top: 10upx;
	/* 超过省略号 */
	text-overflow: -o-ellipsis-lastline;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 1;
	line-clamp: 1;
	-webkit-box-orient: vertical;
}

.songArray_mv {
	width: 10%;
}

#songArray_mv {
	width: 10%;
	line-height: 70upx;
}

#songArray_other {
	/* color: #CCCCCC; */
	width: 10%;
	line-height: 70upx;
}
.mytarbar{
	position: fixed;
	button:0upx;
	left: 0;
	right: 0;
	z-index: 11;
}
</style>
